import React, {useEffect, useRef, useState} from 'react';
import {Button, Form, Input, message, Modal, Popconfirm, Space, Table} from 'antd';
import useUserList from '@/hooks/getUserList.js';
import {HTTP} from "@/utils/HTTP.js";

const Management = () => {
    // 拿到用户数据
    const {userList} = useUserList()
    // 点击显示对话框
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 拿到表单实例
    const [form] = Form.useForm();
    // 给编辑按钮绑定点击事件
    const onchange = (record) => {
        setIsModalOpen(true)
        form.setFieldsValue(record)

    }
    // 给删除按钮绑定点击事件
    const onDelete = async (id) => {
        await HTTP.delete(`/Allin/delete?id=${id}`).then(res => {
            if (res.code === 102) {
                message.success('删除成功')
                setTimeout(() => {
                    window.location.reload()
                }, 1000)
            }
            if (res.code === 202) {
                message.error('删除失败')
            }
        })
    }
    // 自定义列名
    const columns = [
        {
            title: '用户ID',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        },
        {
            title: '修改时间',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
        },

        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="dashed" onClick={() => onchange(record)}>
                        编辑
                    </Button>
                    <Popconfirm
                        title="删除该数据"
                        description="你确定要删除该数据吗？"
                        onConfirm={() => onDelete(record.id)}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type={"dashed"} danger>删除</Button>
                    </Popconfirm>

                </Space>
            ),
        },
    ];
    // 提交修改后的数据
    const onSubmit = async () => {

        setIsModalOpen(false);
        let data = form.getFieldsValue()
        const res = await HTTP.post('/Allin/updated', data)
        if (res.code === 101) {
            await message.success("修改成功")
            window.location.reload()
        } else {
            message.error("修改失败")
        }
    }
    return (
        <div>
            <Table rowKey={(record) => record.id}
                   columns={columns}
                   dataSource={userList}
                   scroll={{y: 500}}
                   pagination={
                       {
                           pageSize: 8,
                       }
                   }/>

            <Modal okText={"提交"} cancelText={"返回"} title="编辑用户信息" open={isModalOpen} onOk={onSubmit}
                   onCancel={() => {
                       setIsModalOpen(false);
                   }}>
                <div>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            width: 400,
                        }}
                        form={form}
                    >
                        <Form.Item
                            label={"用户ID"}
                            name="id"
                        >
                            <Input disabled={true}/>
                        </Form.Item>
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password/>
                        </Form.Item>
                        <Form.Item
                            label="地址"
                            name="address"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    )
};
export default Management;